{% extends "mainTemplate.html" %}
	
{% block head %}
	
	<link type="text/css" rel="stylesheet" href="/stylesheets/timeline.css" />

	<script>
      Timeline_ajax_url="/timeline_2.2.0/src/ajax/api/simile-ajax-api.js";
      Timeline_urlPrefix="/timeline_2.2.0/src/webapp/api/";
      Timeline_parameters='bundle=false';
    </script>
	
	<script src="/timeline_2.2.0/src/webapp/api/timeline-api.js" type="text/javascript"></script>


	<script>
	
	{% if start_date %}
	function start_offset(interval){
		if(interval == Timeline.DateTime.CENTURY)
			return new Date({{start_date.year}}-100, {{start_date.month}}-1,{{start_date.day}});
		else if(interval == Timeline.DateTime.DECADE)
			return new Date({{start_date.year}}-10, {{start_date.month}}-1, {{start_date.day}});
		else if(interval == Timeline.DateTime.YEAR)
			return new Date({{start_date.year}}-1, {{start_date.month}}-1, {{start_date.day}});
		else if(interval == Timeline.DateTime.MONTH)
			return new Date({{start_date.year}}, {{start_date.month}}-2, {{start_date.day}});
		else if(interval == Timeline.DateTime.DAY)
			return new Date({{start_date.year}}, {{start_date.month}}, {{start_date.day}}-1);
		else
			return new Date({{start_date.year}}, {{start_date.month}}, {{start_date.day}});
	}
	{% endif %}
		
	function onLoad() {
	
		var largeband_interval_pixels = ((document.getElementById("tl").offsetWidth) / ({{largeband_interval_num}} + 2));
		
		if({{largeband_interval}} == Timeline.DateTime.MILLENNIUM)
			zoom_index = 17
		else if({{largeband_interval}} == Timeline.DateTime.CENTURY)
			zoom_index = 14
		else if({{largeband_interval}} == Timeline.DateTime.DECADE)
			zoom_index = 11
		else if({{largeband_interval}} == Timeline.DateTime.YEAR)
			zoom_index = 8
		else if({{largeband_interval}} == Timeline.DateTime.MONTH)
			zoom_index = 5
		else if({{largeband_interval}} == Timeline.DateTime.DAY)
			zoom_index = 2
		else
			zoom_index = 8
		
		var eventSource = new Timeline.DefaultEventSource();
		var bandInfos = [
	    	
			Timeline.createBandInfo({
        		eventSource:    eventSource,
	        	width:          "70%", 
	        	intervalUnit:   {{largeband_interval}}, 
	        	intervalPixels: ((document.getElementById("tl").offsetWidth) / ({{largeband_interval_num}} + 2)),
				zoomIndex:      zoom_index,
	            zoomSteps:      new Array(
	              {pixelsPerInterval: largeband_interval_pixels * 4,  unit: Timeline.DateTime.DAY},
	              {pixelsPerInterval: largeband_interval_pixels * 2,  unit: Timeline.DateTime.DAY},
    	          {pixelsPerInterval: largeband_interval_pixels    ,  unit: Timeline.DateTime.DAY},
	              {pixelsPerInterval: largeband_interval_pixels * 4,  unit: Timeline.DateTime.MONTH},
	              {pixelsPerInterval: largeband_interval_pixels * 2,  unit: Timeline.DateTime.MONTH},
	              {pixelsPerInterval: largeband_interval_pixels    ,  unit: Timeline.DateTime.MONTH},
				  {pixelsPerInterval: largeband_interval_pixels * 4,  unit: Timeline.DateTime.YEAR},
				  {pixelsPerInterval: largeband_interval_pixels * 2,  unit: Timeline.DateTime.YEAR},
				  {pixelsPerInterval: largeband_interval_pixels    ,  unit: Timeline.DateTime.YEAR},
				  {pixelsPerInterval: largeband_interval_pixels * 4,  unit: Timeline.DateTime.DECADE},
				  {pixelsPerInterval: largeband_interval_pixels * 2,  unit: Timeline.DateTime.DECADE},
				  {pixelsPerInterval: largeband_interval_pixels    ,  unit: Timeline.DateTime.DECADE},
				  {pixelsPerInterval: largeband_interval_pixels * 4,  unit: Timeline.DateTime.CENTURY},
				  {pixelsPerInterval: largeband_interval_pixels * 2,  unit: Timeline.DateTime.CENTURY},
				  {pixelsPerInterval: largeband_interval_pixels    ,  unit: Timeline.DateTime.CENTURY},
				  {pixelsPerInterval: largeband_interval_pixels * 4,  unit: Timeline.DateTime.MILLENNIUM},
				  {pixelsPerInterval: largeband_interval_pixels * 2,  unit: Timeline.DateTime.MILLENNIUM},
				  {pixelsPerInterval: largeband_interval_pixels    ,  unit: Timeline.DateTime.MILLENNIUM}
				)
	 		}),
     		
			Timeline.createBandInfo({
	         	overview:       true,
	         	eventSource:    eventSource,
	         	width:          "30%", 
	         	intervalUnit:   {{smallband_interval}}, 
			 	intervalPixels: ( (document.getElementById("tl").offsetWidth) / ({{smallband_interval_num}} + 2) )
	     	})
	   ];
	   //bandInfos[1].syncWith = 0;
	   bandInfos[1].highlight = true;
	   
	   tl = Timeline.create(document.getElementById("tl"), bandInfos);
	   Timeline.loadXML("/timelineXML/{{ timeline_revision.key }}", function(xml, url) { eventSource.loadXML(xml, url); });
	   
	   {% if start_date %}
	   tl.getBand(0).setMinVisibleDate(start_offset({{largeband_interval}}));
	   tl.getBand(1).setMinVisibleDate(start_offset({{smallband_interval}}));
	   {% endif %}
 }
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
    </script>
{% endblock %}

{% block bodytag %}
<body onload="onLoad();" onresize="onResize();">
{% endblock %}

{% block actionbar %}
	<li {% ifequal activetab "timeline" %}class="active"{% endifequal %}><a href="/timeline/{{timeline.name}}">Timeline</a></li>
	<li {% ifequal activetab "revisions" %}class="active"{% endifequal %}><a href="/timeline/{{timeline.name}}/revisions">Revisions</a></li>
	
	{% if current_user.perms.timeline_edit %}
		<li {% ifequal activetab "edit" %}class="active"{% endifequal %}><a href="/timeline/{{timeline.name}}/edit">Edit</a></li>
	{% endif %}
	{% if current_user.perms.timeline_delete %}
		<li {% ifequal activetab "delete" %}class="active"{% endifequal %}><a href="/timeline/{{timeline.name}}/delete">Delete</a></li>
		<li><a href="/timelineXML/{{timeline_revision.key}}">XML</a></li>
	{% endif %}
	
{% endblock actionbar%}
	
{% block mainheading %}{{timeline.name}}{% endblock %}